<template>
  <div class="box">
    <div class="list" v-for="(item,index) in address.rows">
      <div class="name td">{{item.name}}</div>
      <div class="tel td">{{item.phone}}</div>
      <div class="address td">{{item.address}}</div>
      <div class="right td">
        <el-button size="mini" class="del" type="danger" icon="el-icon-delete" circle @click="del(item.id)"></el-button>
        <span v-if="item.default==1" style="color: red;" @click="qxmr(item.id)">取消默认地址</span>
        <span v-else @click="sz(item.id)">设为默认地址</span>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-plus" circle  @click="showbox = !showbox"></el-button>
    <div class="showbox" v-show="showbox">
      <div class="boxx">
        <div class="head">
          <span>添加新的收货地址</span>
          <i class="el-icon-close close" @click="showbox=false"></i>
        </div>
        <div class="item">
          <label>联系人：</label>
          <input type="text" name="name" v-model="lxr" placeholder="请输入联系人姓名">
        </div>
        <div class="item">
          <label>选择地址：</label>
          <v-distpicker @selected="ds"></v-distpicker>
        </div>
        <div class="item">
          <label>详细地址：</label>
          <input type="text" name="address" v-model="xxdz" placeholder="请输入详细地址">
        </div>
        <div class="item">
          <label>联系电话：</label>
          <input type="text" name="phone" v-model="lxdh" placeholder="请输入联系电话">
        </div>
        <div class="item">
          <el-button type="primary" @click="tj()">提交信息</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      showbox:false,
      xxdz:'',
      lxdh:'',
      lxr:'',
      zdz:'',
      sjlddz:'',
      adr:'',
      sheng:'',
      address:{}
    }
  },
  methods:{
    // 获取收货地址列表
    getaddress: function(){
      this.$http.post("/index.php/user/address/index",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid

      }))
      .then(res => {
        this.address = res.data
        console.log(this.address)
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    sz:function(i){
      this.$http.post("/index.php/user/address/address_default",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          id: i
      }))
      .then(res => {
        alert('设置成功');
        this.getaddress();
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    qxmr:function(i){
      this.$http.post("/index.php/user/address/cancel_default",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          id: i
      }))
      .then(res => {
        alert('取消成功');
        this.getaddress();
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    del:function(i){
      this.$confirm('你将删除该地址, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          this.$http.post("/index.php/user/address/del_address",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              user_id: this.$store.state.userid,
              id: i
          }))
          .then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getaddress();
          })
          .catch(error => {
            alert("网络错误")
          });
          
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
    },
    ds(data) {
      this.adr = data.province.value+data.city.value+data.area.value
      this.sheng = data.province.value
      console.log(this.sheng)
    },
    tj:function(){
      // this.zdz = this.xxdz+this.adr
      // this.address.list.push({
      //   name:this.lxr,
      //   tel:this.lxdh,
      //   addr:this.zdz
      // });
      this.$http.post("/index.php/user/address/add",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          name: this.lxr,
          phone: this.lxdh,
          address: this.adr+this.xxdz,
          region_mergename: this.sheng

      }))
      .then(res => {
        console.log(res)
        this.zdz = ''
        this.lxr = ''
        this.lxdh = ''
        this.showbox = false
        this.getaddress();
      })
      .catch(error => {
        alert("网络错误")
      });
      
    }
  },
  created(){
    this.getaddress();
  },
  components:{
    VDistpicker
  }
}
</script>

<style scoped lang="less">
.box{
  width: 100%;
  zoom: 1;
  height: auto;
  overflow: hidden;
  text-align: center; 
  .list{
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid #bfbfbf;
    margin-bottom: 16px;
    .td{
      float: left;
      height: 100%;
      text-align: left;
      line-height: 52px;
      font-size: 14px;
      overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    }
    .name{
      width: 120px;
      margin-left: 20px;
    }
    .tel{
      width: 120px;
    }
    .address{
      width: 450px;
    }
    .right{
      width: 200px;
      float: right;
      .del{
        float: right;
        margin-right: 20px;
        margin-top: 7px;
      }
      span{
        float: right;
        margin-right: 14px;
        cursor: pointer;
        color: #50b748;
      }
    }
  }
}
.showbox{
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.8);
  left: 0;
  top: 0;
  z-index: 9999;
  .boxx{
    position: absolute;
    width: 680px;
    height: 440px;
    background: #fff;
    border-radius: 8px;
    left: 50%;
    margin-left: -340px;
    top: 50%;
    margin-top: -220px;
    .head{
      width: 100%;
      height: 48px;
      text-align: center;
      span{
        line-height: 48px;
        font-size: 16px;
        color: #212121;
        padding-left: 40px;
      }
      .close{
        text-align: right;
        font-size: 20px;
        color: #c12c2c;
        float: right;
        line-height: 48px;
        font-weight: bold;
        padding-right: 20px;
        cursor: pointer;
      }
    }
    .item{
      width: 90%;
      margin: 0px 5% 14px;
      text-align: left;
      label{
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
      }
      input{
        display: block;
        width: 312px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        text-indent: 10px;
        font-size: 1rem;
        color: #464a4c;
        border-radius: 4px;
      }
    }
  }
}
</style>
